<style lang="scss" scoped>
.van-nav-bar__left {
  left: 0;
  color: #000;
}

.chat {
  width: 100%;
  height: 3rem;
  background: pink;
}

.Chat_freely {
  width: 100%;
  height: 6rem;
  margin-bottom: 0.5rem;
}

.newinp {
  width: 100%;
  height: 5rem;
  padding-left: 1.1rem;
  margin-top: 1rem;
}

.inpunt {
  display: flex;
  display: inline-block;
  padding: 0;
  line-height: 0px;
  width: 19.125rem;
  // height: 100px;
  height: 4.5rem;
  height: 4.5rem;
  font-size: 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid #f7f7f7;
  background: #f7f7f7;
  // word-wrap:break-word;
  // padding-top: 1px;
  //  box-sizing: border - box;
}

.Dialog {
  width: 15rem;
  height: 3rem;
  background: #4c4c4c;
  color: aliceblue;
  border: 0.0625rem solid black;
  border-radius: 0.5rem;
  text-align: center;
  position: fixed;
  top: 21rem;
  left: 6rem;
}

.Upload_pictures {
  width: 100%;
  height: 3rem;
  padding-left: 0.5rem;
  margin-top: 2rem;
  display: flex;
}

.temporarily {
  // background: #37d767;
  width: 12rem;
  height: 2.5rem;
  background: #ffffff;
  border: 0.0625rem solid #37d767;
  color: #37d767;
  border-radius: 1.2rem;
}

.Upload {
  width: 12rem;
  height: 2.5rem;
  border-radius: 1.2rem;
  background: #39d167;
  border: 0.0625rem solid #39d167;
  color: #fff;
}

.newupload {
  position: absolute;
  width: 50%;
  height: 10rem;
  border: 1px solid #f7f7f7;
  font-size: 14px;

  p {
    margin-top: 0.6rem;
  }
}

.newuploadchildren {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
}

.chat div {
  width: 5rem;
  height: 3rem;
}

.chatbox {
  width: 100%;
  height: calc(100% - 100px - 15%);
  position: relative;
  background: #f7f7f7;
}

.chatboxnewbox {
  width: 100%;
  height: 30rem;
  display: flex;
}

#chat-messages {
  height: 430px;
  /* 设置聊天窗口的高度，可根据实际需求调整 */
  overflow-y: auto;
  /* 当内容超出高度时，自动出现垂直滚动条 */
  scroll-behavior: smooth;
  /* 滚动效果平滑 */
}

.left {
  width: 70%;
  height: 7rem;
  font-size: 14px;
  margin-right: 13rem;
}

.right {
  width: 65%;
  height: 7rem;
  // margin-top: 100px;
  font-size: 14px;
  // background: blue;
}

.left img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.leftchildren {
  width: 100%;
  // height: 1.25rem;
  display: flex;
}

.leftchildren .p11 {
  padding: 10px;
  background-color: #d8eefc;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.leftchildren img {
  width: 4.125rem;
  height: 3.125rem;
}

.leftchildren dt dd {
  width: 2rem;
  height: 3.125rem;
  border: 1px solid #f7f7f7;
  background: red;
}

.rightchildren {
  // height: 20px;
  display: flex;
  margin-top: 15px;
  flex-direction: row-reverse;
  width: 100%;
  margin-left: 4rem;
}

.rightchildren .p11 {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #f7f7f7;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.imgAvatar {
  width: 4.125rem;
  height: 3.125rem;
  border-radius: 50%;
}

.archives {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  height: 100px;
}

.popupZan {
  height: 6rem;
  margin: 10px;

  h4 {
    margin-bottom: 10px;
  }

  .xin {
    >p {
      // width: 100px;
      // height: 60px;
      // border: 1px dashed #37ce69;
      // color: #37ce69;
      // text-align: center;
      // line-height: 60px;
    }
  }
}

.Brother {
  width: 100%;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;

  li {
    width: 7rem;
    height: 60px;
    border: 1px dashed #37ce69;
    color: #37ce69;
    text-align: center;
    line-height: 30px;
    // margin-left:5px;
    margin-top: 5px;
  }
}

.newword {
  width: 30%;
  height: 60px;
  margin-left: .125rem;
  padding-left: 1px;
  // background: #37ce69;
}

// .newfiles {
//   width:50%;
//   height: 60px;
//   // background: #37ce69;
//   // margin-left: 110px;
//   display: flex;
//   // background: #37ce69;
//   padding-right:10px;

//   li {
//     width: 100px;
//     height: 60px;
//     border: 1px dashed #37ce69;
//     color: #37ce69;
//     text-align: center;
//     line-height: 30px;
//     margin-left:10px ;
//   }
// }

.word {
  // background: #37ce69;
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: space-between;

  li {
    width: 30%;
    height: 60px;
    float: left;
    border: 1px dashed #37ce69;
    text-align: center;
    line-height: 60px;
    position: absolute;
    left: 2;
  }
}


.handimg {
  width: 3.125rem;
  height: 3.125rem;
  border: 1px solid #ffffff;
  border-radius: 30px;
}

.bottom2Top {
  width: 25rem;
  height: 12.5rem;
  margin-top: 10px;
  border-bottom: 2px solid #f2f2f2;
}

.newBox {
  width: 100%;
  height: 2rem;
  display: flex;

  // background: #37ce69;
  p {
    width: 100%;
    height: 2rem;

    span {
      margin-left: 10px;
    }
  }
}

.newbox {

  width: 100%;
  height: 2rem;
  display: flex;

  // background: #37ce69;
  p {
    width: 100%;
    height: 2rem;

    span {
      margin-left: 10px;
    }
  }
}

.title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  // word-break: break-all;
}

.disease {
  margin-top: .625rem;

  span {
    width: 1.25rem;
    height: .625rem;
    background: #f6f6f6;
    border: 1px solid #f6f6f6;
  }
}

.price {
  margin-top: 1rem;

  span {
    width: 1.25rem;
    height: .625rem;

  }

  .Graphic {
    display: inline-block;
    width: 5rem;
    height: 1.875rem;
    border: 1px solid #99e7b1;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
    color: #99e7b1;
  }

  span:nth-child(2) {
    margin-left: 160px;
    color: #99e7b1;

  }
}

.Patient_files {
  width: 100%;
  height: 10rem;
}
.newinpunt{
  position: absolute;
  right: 0;
}
.box1 {
  width: 100%;
  height: 80vh;
  // border: 1px solid #1fd712;
  margin-top: 10px;
  .anniu {
    position: fixed;
    // z-index: 888;
    bottom: 0px;
  }
}
</style>
<template>
  <div>
    <!-- 返回首页 -->
    <van-nav-bar title="描述病情" left-arrow @click-left="onClickLeft" van-nav-bar-icon-color="black" />
  </div>
  <div class="active">
    <van-steps :active="active" active-icon="success" active-color="#07c160">
      <van-step v-bind="active === 1">描述病情</van-step>
      <van-step v-bind="active === 1">发送图片</van-step>
      <van-step v-bind="active === 2">选择就诊人</van-step>
      <van-step v-bind="active === 3">匹配医生信息</van-step>
    </van-steps>
  </div>
  <div class="Chat_freely">
    <img src="../../assets/Chat_freely.jpg" alt="" style="margin-left: 1rem" />
  </div>
  <!-- 聊天区 -->
  <div class="chatbox" id="chat-messages">
    <div v-show="box">
      <div v-for="(item, ind) in comments" :key="ind">
        <div class="left" v-if="item.type === 'server'">
          <dl class="leftchildren">
            <!-- 头像 -->
            <dt><img src="../../assets/10.png" /></dt>
            <dd>
              <p class="p11">{{ item.content }}</p>
              <p style="width: 15rem; height: 2rem; padding-top: 0.5rem">{{ item.datetime }}</p>
            </dd>
          </dl>
        </div>
        <div class="right" v-else style="margin-bottom: 5rem">
          <dl class="rightchildren">
            <!-- 头像 -->
            <dt><img class="imgAvatar" src="../../assets/8.jpg" /></dt>
            <dd>
              <p class="p11">{{ item.content }}</p>
              <p style="width: 15rem; height: 2rem; padding-top: 0.5rem">{{ item.datetime }}</p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <!-- 选择科室 -->
  <!--  -->
  <div class="box1" v-show="yincang">
    <div style="
        margin: 10px;
        padding: 10px;
        background: #eeeeee;
        font-size: 13px;
        color: #666666;
        line-height: 25px;
      ">
      请您仔细阅读
      <span style="color: #63d886; font-size: 13px">《知情同意书》</span>
      <span style="color: #63d886; font-size: 13px">《快速问诊服务说明》</span>
      ，如非复诊，我们仅提供医疗咨询服务。继续操作表示您知悉并同意上述告知内容。
    </div>
    <div>
      <div style="
          margin: 0 10px;
          padding: 10px;
          height: 80px;
          display: flex;
          align-items: center;
          background: linear-gradient(to right, #cdf0e2, #ecfaf4);
        ">
        <div style="flex: 2.7">
          <p style="font-size: 12px">根据您的病情描述，匹配以下科室医生接诊</p>
          <p style="margin-top: 10px; color: #ffa800; font-weight: bold">
            【
            <span>{{ value2 }}</span>
            】
          </p>
        </div>
        <div style="flex: 1.2; font-size: 12px">
          <van-button icon="discount-o" round plain type="success" size="mini" @click="popupKe">
            重选科室
          </van-button>
        </div>
      </div>
      <!-- 弹框 -->
      <van-popup v-model:show="show5" position="bottom" :style="{ height: '40%' }">
        <van-tree-select style="height: 100vh" v-model:active-id="activeId" v-model:main-active-index="activeIndex"
          :items="items" @click-item="keshi" />
      </van-popup>
      <van-radio-group v-model="checked" @click="handleRadio(event)">
        <div style="
            margin: 0 10px;
            padding: 0 10px;
            height: 80px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eeeeee;
          ">
          <div style="flex: 2">
            <p>三甲快问-图文咨询</p>
            <p style="margin-top: 10px; font-size: 13px">
              公立三甲医生、
              <span style="font-size: 13px; color: #ff7e59">1小时不限次</span>
              快速交流
            </p>
          </div>
          <div style="flex: 0.5">
            <p style="color: #ff7e59">￥{{ priceTop[0] }}</p>
            <del style="color: #acacac">￥29.9</del>
          </div>
          <div style="flex: 0.1; font-size: 12px">
            <van-radio name="13.9"></van-radio>
          </div>
        </div>
        <div style="
            margin: 0 10px;
            padding: 0 10px;
            height: 80px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eeeeee;
          ">
          <div style="flex: 2">
            <p>特惠快问-图文咨询</p>
            <p style="margin-top: 10px; font-size: 13px">
              公立医院医生、
              <span style="font-size: 13px; color: #ff7e59">1小时不限次</span>
              快速交流
            </p>
          </div>
          <div style="flex: 0.5">
            <p style="color: #ff7e59">￥{{ priceTop[1] }}</p>
            <del style="color: #acacac">￥19.9</del>
          </div>
          <div style="flex: 0.1; font-size: 12px">
            <van-radio name="9.9"></van-radio>
          </div>
        </div>
        <div style="
            margin: 0 10px;
            padding: 0 10px;
            height: 80px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eeeeee;
          ">
          <div style="flex: 2">
            <p>三甲畅聊-图文咨询</p>
            <p style="margin-top: 10px; font-size: 13px">
              公立三甲医生、
              <span style="font-size: 13px; color: #ff7e59">24小时不限次</span>
              快速交流
            </p>
          </div>
          <div style="flex: 0.5">
            <p style="color: #ff7e59">￥{{ priceTop[2] }}</p>
            <del style="color: #acacac">￥39.9</del>
          </div>
          <div style="flex: 0.1; font-size: 12px">
            <van-radio name="29.9"></van-radio>
          </div>
        </div>
      </van-radio-group>
      <!-- 医生 -->
      <div style="margin: 10px; padding: 10px; border: 1px solid">
        <div>
          <p>
            您可同时选择
            <span style="color: #faab0d">多位医生</span>
            听取更多意见
          </p>
        </div>
      </div>
    </div>
    <div class="middle">
      <div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div v-for="(item, index) in date" :key="index" class="bottom2Top">
            <dl>
              <dt class="newBox">
                <div class="handimg"><img :src="item.img" alt="" class="handimg" /></div>
                <p style="display:flex; margin-right: 15px;">
                  <span style="font-size:20px; font-weight: bold;">{{ item.name }}</span>
                  <span>{{ item.title }}</span>
                  <span>{{ item.clinic_name }}</span>
                  <span class="head-text-tou-pa-ke" v-if="item.tag1 === '可开处方'"
                    style="background: #f3f8fd;width: 70px;height: 15px;color:#7ebcf0">{{ item.tag1 }}</span>
                  <span >
                      <van-checkbox
                v-model="item.flag"
                icon-size="1rem"
                checked-color="#1989fa"
                @click="total_price(item)"
              ></van-checkbox>
                  </span>
            </p>
              </dt>

              <dt class="newbox">
                <p style="margin-left: 50px">
                  <span>{{ item.hospital }}</span>
                  <span class="head-text-tou-pb-san" v-if="item.tag2 === '三甲'"
                    style="background: #28c687;width: 30px;height: 15px;color:#f0faf6;">{{ item.tag2 }}</span>
                </p>
              </dt>
              <dd>
              <dd>
                <p class="title">
                  {{ item.desc }}
                </p>
                <p class="disease">
                  <span>焦虑症4421</span>&emsp13;
                  <span>抑郁症12068</span>&emsp13;
                  <span>心脏53888</span>&emsp13;
                </p>
                <p class="price">
                  <span class="Graphic">图文￥{{ item.price }}</span>
                  <span><span>{{ item.descrip }}<van-icon name="star" color="#fdb206" />&emsp13;<b>|</b>&emsp13;接诊量{{
                    item.descrip_num }}</span></span>
                </p>
              </dd>
              </dd>
            </dl>
          </div>
        </van-list>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="anniu" style="width: 100%; height: 50px">
      <van-button round block type="success" native-type="submit" @click="pricesubmit" >
        去问诊(￥{{toAllPrice}})
      </van-button>
    </div>
  </div>
  <!-- 档案 -->
  <div class="newinp" v-if="Hide_input">
    <input type="text" placeholder="请用10-500字描述具体症状、患病时长、用药
情况、需要医生提供哪些帮助等" v-model="value" class="inpunt" @keyup.enter="sendMessage" /><button @click="handleSubmit" style="
        padding: 0px;
        line-height: 1rem;
        background: #37d767;
        border: solid 0.15rem #fff;
        color: #c2f0d0;
        width: 4.5rem;
        height: 2.5rem;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
      ">
      提交
    </button>
  </div>

  <div class="Dialog" v-if="Dialog">
    <li style="margin-top: 0.7rem">病情描述不可少于10个字</li>
  </div>
  <div class="Upload_pictures" v-if="showUpload_pictures">
    <button class="temporarily" @click="Not_yet">暂时没有</button>
    <button class="Upload" @click="upload">上传图片</button>
  </div>
  <!-- 新上传图片 -->
  <div class="newupload" v-if="newupload">
    <van-popup v-model:show="showBottom" position="bottom" :overlay="false" :style="{ height: '25%' }">
      <div class="newuploadchildren">
        <p style="color: black; margin-left: 0.5rem">上传图片(选填)</p>
        <p style="padding-left: 13rem" @click="seek">跳过</p>
      </div>
      <div style="width: 90%; height: 3.5rem; margin-left: 0.5rem">
        <p>检查单/历史病例/患处照片(最多9张)</p>
        <p>
          <input type="file" ref="fileInput" @change="FileImage" class="upload" />
        </p>
      </div>
      <div style="width: 90%; height: 2rem; margin-left: 0.5rem">
        如何正确拍摄清晰照片?查看指南>>
      </div>
      <div style="width: 90%; height: 2rem">
        <button style="
            width: 100%;
            height: 2rem;
            color: #fff;
            background: #39d167;
            margin-left: -0.7rem;
            border-radius: 1rem;
            border: 0.0625rem solid #37d767;
          ">
          确定
        </button>
      </div>
    </van-popup>
  </div>
  <div v-show="File_hiding" class="Patient_files">
    <van-popup v-model:show="show1" closeable position="bottom" :overlay="false" :style="{ height: '30%' }">
      <div class="popupZan">
        <h4>患者档案</h4>
        <van-notice-bar left-icon="shield-o" :scrollable="false" text="真实档案有利于医生准确判断病情，将严格保障您隐私安全" />
        <div class="xin">
          <div class="Brother">
            <li @click="showPopup2" style="line-height:70px;width: 7rem;height: 60px;  text-align: center;
    line-height: 30px;  padding-left: 10px;">新建文档</li>
            <span v-if="!archive.length">

            </span>
            <span v-else v-for="(item, index) in archive" :key="index">
              <li @click="sendarchives(item)">{{ item.name }}<br />{{ item.sex }}&emsp;{{ item.relationship }}</li>
            </span>
          </div>
          <!-- 弹出框 -->
          <van-popup v-model:show="show2" position="bottom" :style="{ height: '43%' }" :overlay="false">
            <h3 @click="onClickLeft1">&nbsp;&nbsp;<新建档案</h3>
                <van-notice-bar left-icon="shield-o" :scrollable="false" text="您的信息仅接诊医生可见，春雨医生为您提供隐私保护" />
                <van-form @submit="onSubmit" v-model="formData">
                  <van-cell-group inset>
                    <van-field v-model="formData.name" label="姓名" placeholder="请输入患者姓名" />
                    <!-- <van-field v-model="formData.relationship" label="与您的关系" placeholder="本人,爱人等" /> -->
                    <van-field v-model="formData.relationship" is-link readonly label="关系" placeholder="请选择"
                      @click="showPicker = true" />
                    <div style="
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    border-bottom: 1px solid #f5f6f7;
                    padding-bottom: 10px;
                  ">
                      <p style="margin-left: 10px; margin-top: 10px; flex: 1">性别</p>
                      <van-radio-group style="flex: 2" v-model="formData.sex" direction="horizontal">
                        <van-radio name="男">男</van-radio>
                        <van-radio name="女">女</van-radio>
                      </van-radio-group>
                    </div>
                    <div style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #f5f6f7;
                    padding-bottom: 5px;
                  ">
                      <p style="margin-left: 10px; margin-top: 10px">出生日期</p>
                      <van-field v-model="formData.nyr">{{ formData.nyr }}</van-field>
                      <van-icon name="arrow" @click="riqi" />
                    </div>
                    <van-popup v-model:show="show3" position="bottom" :style="{ height: '45%' }">
                      <van-date-picker v-model="currentDate" title="选择日期" :min-date="new Date(1000, 0, 1)"
                        :max-date="new Date()" @cancel="no" @confirm="yes" ref="getSelectedDate" />
                    </van-popup>
                  </van-cell-group>
                  <div style="margin: 10px">
                    <van-button round block type="success" native-type="submit">提交</van-button>
                  </div>
                </van-form>
          </van-popup>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import http from '@/http/axios'
const router = useRouter()
const active = ref(0)
const flags = ref(false)
// 档案显示和隐藏
const archives = ref(false)
const Dialog = ref(false)
//图片显示
const imageURL = ref(null)
//选择又没有上传显示隐藏
const showUpload_pictures = ref(false)
//上传图片显示隐藏
const showBottom = ref(false)
//新上传图片隐藏
const newupload = ref(false)
//输入框显示隐藏
const Hide_input = ref(true)
//患者档案隐藏
const File_hiding = ref(false)
//患者档案弹出层显示
const show1 = ref(false)
//显示档案列表
const show2 = ref(false)
//显示日期
const show3 = ref(false)
//隐藏购买
const box = ref(true)
const yincang = ref(false)
const inpuntvalue = ref('')
// const messages = ref(['您好，我是您的智能助手，请问有什么可以帮助您的吗？'])
const formData = ref({
  name: '',
  relationship: '',
  sex: '',
})
// instanceof forDatatype{
//    name: string,
//   guanxi: string,
//   sex: string,
// }
const price = ref(0)
const imageBase64 = ref('')
const num = ref(0)
const date = ref([])
const data = ref([])
const getData = async () => {
  await http.get('/addres/doctorCY').then((res) => {
    console.log(res)
    data.value = res.data.data.RECORDS
    date.value = date.value.concat(res.data.data.RECORDS.slice(num, 5))
    console.log(date.value, 'date')
  })
}
getData()
imageBase64.value.startsWith
const fileInput = ref(null)
//图片上传
const FileImage = () => {
  const file = fileInput.value.files[0]
  console.log(file)
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      console.log(e.target.result)
      console.log(1111)

      imageBase64.value = e.target.result
      console.log(imageBase64.value)
      comments.value.push({
        type: 'person',
        content: imageBase64.value,
        datetime: new Date().toLocaleString(),
      })
    }
    reader.readAsDataURL(file)
    newupload.value = false
    File_hiding.value = true
    show1.value = true
  }
}

/**
 * 显示弹窗的函数
 *
 * @returns {void} 无返回值
 */
const popupKe = () => {
  show5.value = true
}
const onClickLeft = () => {
  router.push({ path: '/home' })
}
//第五个弹窗
const show5 = ref(false)
setInterval(() => {
  Dialog.value = false
}, 4000)
//上传图片
const upload = () => {
  showUpload_pictures.value = false
  newupload.value = true
  showBottom.value = true
  active.value++
  console.log('上传图片')
}
//暂时没有
const Not_yet = () => {
  showUpload_pictures.value = false
  File_hiding.value = true
  show1.value = true
  active.value++
}
const list = ref(1)
//显示文档
const showPopup2 = () => {
  show2.value = true
}
const checked = ref('0')

//显示日期
const riqi = () => {
  show3.value = true
}
//暂时没有
const seek = () => {
  //上传图片隐藏
  newupload.value = false
  //档案显示
  File_hiding.value = true
  //档案弹出层显示
  show1.value = true
  active.value++
}
//隐藏档案按钮
const onClickLeft1 = () => {
  show2.value = false
}
const value2 = ref('科室')
const userInfo = ref({
  userId: '',
})

const handleRadio = (e)=>{
  console.log(checked.value);
}
//隐藏关系框
const priceTop = ref(['19.9', '29.9', '39.9'])
const showPickerst = ref(false)
const yourMessage = ref('')
const messageList = ref([])
const onlineList = ref([])
const items = [
  {
    text: '全部',
    children: [{ text: '全部疾病', id: 1 }],
  },
  {
    text: '内科',
    children: [
      { text: '呼吸内科', id: 2 },
      { text: '消化内科', id: 3 },
      { text: '神经内科', id: 4 },
      { text: '内分泌科', id: 5 },
      { text: '心血管内科', id: 6 },
      { text: '风湿免疫科', id: 7 },
      { text: '血液内科', id: 8 },
      { text: '肾内科', id: 9 },
      { text: '感染内科', id: 10 },
      { text: '老年病科', id: 11 },
      { text: '普通内科', id: 12 },
      { text: '高压氧科', id: 13 },
      { text: '过敏反应科', id: 14 },
    ],
  },
  {
    text: '外科',
    children: [
      { text: '普通外科', id: 15 },
      { text: '泌尿外科', id: 16 },
      { text: '胸外科', id: 17 },
      { text: '心血管外科', id: 18 },
      { text: '神经外科', id: 19 },
      { text: '胃肠外科', id: 20 },
      { text: '肝胆外科', id: 21 },
      { text: '肛肠外科', id: 22 },
      { text: '烧伤科', id: 23 },
      { text: '器官移植', id: 24 },
      { text: '血管外科', id: 25 },
      { text: '甲状腺外科', id: 26 },
      { text: '乳腺外科', id: 27 },
      { text: '介入医学科', id: 28 },
    ],
  },
  {
    text: '妇产科',
    children: [
      { text: '妇产科', id: 29 },
      { text: '产科', id: 30 },
      { text: '妇科', id: 31 },
      { text: '计划生育科', id: 32 },
      { text: '生殖医学科', id: 33 },
      { text: '遗传咨询科', id: 34 },
      { text: '妇科内分泌', id: 35 },
      { text: '妇科肿瘤', id: 36 },
      { text: '产前检查科', id: 37 },
    ],
  },
  {
    text: '儿科',
    children: [
      { text: '新生儿科', id: 38 },
      { text: '新生儿外科', id: 39 },
      { text: '小儿内科', id: 40 },
      { text: '小儿呼吸科', id: 41 },
      { text: '小儿消化科', id: 42 },
      { text: '小儿心内科', id: 43 },
      { text: '小儿肾内科', id: 44 },
      { text: '小儿神经内科', id: 45 },
      { text: '小儿泌尿外科', id: 46 },
      { text: '小儿血液科', id: 47 },
      { text: '小儿内分泌科', id: 48 },
      { text: '小儿风湿免疫科', id: 49 },
      { text: '小儿外科', id: 50 },
      { text: '小儿康复科', id: 51 },
      { text: '小儿皮肤科', id: 52 },
      { text: '小儿耳鼻喉科', id: 53 },
      { text: '小儿眼科', id: 54 },
      { text: '小儿口腔科', id: 55 },
      { text: '儿童保健科', id: 56 },
      { text: '小儿急救科', id: 57 },
    ],
  },
  {
    text: '眼科',
    children: [
      { text: '眼底科', id: 69 },
      { text: '白内障科', id: 70 },
      { text: '角膜科', id: 71 },
      { text: '青光眼科', id: 72 },
      { text: '眼外伤科', id: 73 },
      { text: '小儿眼科', id: 74 },
      { text: '眼视光学科', id: 75 },
      { text: '眼眶及眼肿瘤科', id: 76 },
      { text: '眼整形科', id: 77 },
    ],
  },
  {
    text: '口腔科',
    children: [
      { text: '口腔预防科', id: 78 },
      { text: '口腔正畸科', id: 79 },
      { text: '口腔修复科', id: 80 },
      { text: '口腔黏膜科', id: 81 },
      { text: '牙体牙植科', id: 82 },
      { text: '牙周科', id: 83 },
      { text: '种植科', id: 84 },
      { text: '颌面外科', id: 86 },
      { text: '儿童口腔科', id: 87 },
    ],
  },
  {
    text: '耳鼻咽喉头颈科',
    children: [
      { text: '耳鼻喉科', id: 88 },
      { text: '头颈外科', id: 89 },
      { text: '耳科', id: 90 },
      { text: '鼻科', id: 91 },
      { text: '喉科', id: 92 },
    ],
  },
  {
    text: '肿瘤科',
    children: [
      { text: '肿瘤内科', id: 93 },
      { text: '肿瘤外科', id: 94 },
      { text: '放疗科', id: 95 },
    ],
  },
  {
    text: '皮肤性病科',
    children: [
      { text: '皮肤科', id: 96 },
      { text: '性病科', id: 97 },
    ],
  },
  {
    text: '中医科',
    chil: [
      { text: '中医科', id: 98 },
      { text: '中医妇产科', id: 99 },
      { text: '中医儿科', id: 100 },
      { text: '中医内分泌科', id: 101 },
      { text: '中医消化科', id: 102 },
      { text: '中医呼吸科', id: 103 },
      { text: '中医肾病科', id: 104 },
      { text: '中医免疫内科', id: 105 },
      { text: '中医心内科', id: 106 },
      { text: '中医血液科', id: 107 },
      { text: '中医神经内科', id: 108 },
      { text: '中医肝病科', id: 109 },
      { text: '中医感染内科', id: 110 },
      { text: '中医肿瘤科', id: 111 },
      { text: '中医皮肤科', id: 112 },
      { text: '中医男科', id: 113 },
      { text: '中医外科', id: 114 },
      { text: '中医骨科', id: 115 },
      { text: '中医乳腺外科', id: 116 },
      { text: '中医肛肠科', id: 117 },
      { text: '中医精神科', id: 118 },
      { text: '中医眼科', id: 119 },
      { text: '中医耳鼻咽喉科', id: 120 },
      { text: '中医按摩科', id: 121 },
      { text: '针灸科', id: 122 },
    ],
  },
  {
    text: '骨伤科',
    children: [{ texxt: '骨伤科', id: 123 }],
  },
  {
    text: '精神心理科',
    children: [
      { text: '全部精神心理科', id: 124 },
      { text: '精神科', id: 125 },
      { text: '心理科', id: 126 },
    ],
  },
  {
    text: '全科',
    children: [{ text: '全科医学科', id: 127 }],
  },
  {
    text: '口腔颌面科',
    children: [{ text: '全部口腔颌面科', id: 128 }],
  },
]
const comments = ref([])
const submitting = ref(false)
const value = ref('')
//定义websocket地址
const wsUrl = 'ws:localhost:8082'
// 创建websocket
const ws = new WebSocket(wsUrl)

//ws.onmessage 消息接收
ws.onmessage = (e) => {
  //将消息解析出来
  const res = JSON.parse(e.data)
  //判断消息类型

  // 模拟延迟一秒 模拟提交中
  setTimeout(() => {
    //设置提交状态为true
    submitting.value = false
    //将消息添加到评论列表
    comments.value = [...comments.value, { ...res }]
    //清空输入框
    value.value = ''
  }, 1000)
}
const handleSubmit = () => {
  const length = value.value.length

  if (length < 10) {
    Dialog.value = true
  } else {
    if (!value.value) return
    submitting.value = true
    console.log(value.value);

    //设置消息内容
    const obj = {
      type: 'person',
      content: value.value,
      datetime: new Date().toLocaleString(),
    }
    active.value++
    comments.value = [...comments.value, { ...obj }]
    //发送消息，将消息内容转为json字符串发送给服务器
    ws.send(JSON.stringify(obj))
    // alert('你输入够了')
    Hide_input.value = false
    showUpload_pictures.value = true
    console.log('你输入够了')
  }
}
// 关系数据

const columns = [
  {
    text: '父母',
    value: 'Fumu'
  },
  {
    text: '子女',
    value: 'Zinv'
  },
  {
    text: '爱人',
    value: 'Airen'
  },
  {
    text: '其他',
    value: 'Qita'
  }
]


//时间表关闭
const no = () => {
  show3.value = false
}
//确定获取时间
const getSelectedDate = ref()
const yes = () => {
  formData.nyr = getSelectedDate.value.modelValu
  console.log(formData)

  show3.value = false
}
const senddata = ref("")
//发送档案
const sendarchives = (e) => {
  senddata.value = {
    name: e.name,
    sex: e.sex,
    relationship: e.relationship,
  }

  console.log(JSON.stringify(senddata.value));
  const arr = ref("")
  arr.value = Object.keys(senddata.value).map(key => senddata.value[key]);
  const newarr = ref('')
  newarr.value = arr.value.join('')
  console.log(newarr.value);

  const obj = {
    type: 'person',
    content: newarr.value,
    datetime: new Date().toLocaleString(),
  }
  comments.value = [...comments.value, { ...obj }]
  ws.send(JSON.stringify(obj))
  show2.value = false
  File_hiding.value = false
  show1.value = false
  yincang.value = true
  active.value++

}
onMounted(() => { })
//销毁时关闭websocket连接
onUnmounted(() => {
  ws.close()
})

const send = () => { }
//新建档案
const onSubmit = async () => {
  show2.value = false
  console.log(formData.value);

  // await http.post("/addres/Addarchive",formData.value).then(res=>{
  //   console.log(res);
  // }).catch(err=>{
  //   console.log(err);
  // })
}
const activeId = ref(1)
//全部疾病
/**
 * 响应点击事件的处理函数
 *
 * @param e 事件对象
 */
const keshi = (e) => {
  console.log(e, '我是你哥')
  // console.log(e.text)
  value2.value = e.text
}
const archive = ref([])
//获取档案数据接口
const Getarchivesdata = async () => {
  await http.get('/addres/archive').then((res) => {
    archive.value = res.data.data
    console.log(res.data);
  }).catch((err) => {
    console.log(err);
  })
}
Getarchivesdata()
const pickerValuest = ref([])
const showPicker = ref(false)

const onConfirm = ({ selectedValues, selectedOptions }) => {
  showPicker.value = false;
  pickerValuest.value = selectedValues;
  formData.relationship.value = selectedOptions[0].text;
}

const TotalPrice = () => {
  let Price = 0
  date.value.forEach((item) => {
    Price = item.price + price.value
  })
  return Price
}
const toAllPrice = computed(() => {
  const sumPrice = date.value.reduce((cur,item)=>{
    return item.flag? cur+parseInt(item.price) + parseInt(item.price) + parseInt(checked.value) :cur
  },0)
  return sumPrice.toFixed(2)
})

  // const toAllPrice = computed(() => {
  //      date.value.forEach(item=>{
  //       if(item.flag==true){
  //         return date.value.reduce((sum,item) => sum + item.price, 0);
  //       }
  //      })
  //   });
  const dateid=ref("")
const total_price=(item)=>{
  date.value.forEach((item1) => {
    if (!item1.flag) {
      item1.checked = false
    } else if (item1.flag) {
       item1.checked = true
       dateid.value=item1.id
    }
  })
}

console.log(checked.value,2312131231);
const pricesubmit=async()=>{
  console.log(toAllPrice.value,dateid.value);
    await http.get("/addres/pay",{params:{price:toAllPrice.value,id:dateid.value}}).then(res=>{
    console.log(res.data.result);
}).catch(err=>{
    console.log(err);
})
}
</script>
